<script>
import {getAllMonth, getMonthly} from "@/api/request";
import Cookies from "js-cookie";
import {addSummary} from "@/api/request";

export default {
  name: "index",
  mounted() {
    //   此处进行请求全部内容
    this.getMonthlyList()
  },
  data() {
    return {
      dialogVisible: false,
      dataStr: '',
      // 存放月报信息
      dataList: [],
      // 存放有哪几个月填写了日报，方便处理数据
      tempArr: [],
      // 日报内容
      content: '',
      params: {
        pageNum: 1,
        pageSize: 12,
        username: this.$store.state.user.name
      },
      ruleForm: {},
      rules: [],
      param: {
        state: 1,
        year: '',
        month: '',
        day: '',
        username: this.$store.state.user.name,
        type: 2,
        briefSummary: ''
      },
      disabled: false
    }
  },
  methods: {
    // 获取某一个月的月报
    getMonthlyByDay(month) {
      // console.log(month)
      this.content = ""
      getMonthly(month).then(res => {
        this.dataList = res.data
        // console.log(res.data[0])
        this.content = res.data[0].briefSummary
        this.dataStr = res.data[0].createTime
        this.param.month = res.data[0].month
        this.param.year = res.data[0].year
        this.param.day = res.data[0].day
      })
    },
    // 获取所有的月报
    getMonthlyList() {
      getAllMonth(this.params).then(res => {
        this.dataList = res.rows
        this.dataList.forEach(item => {
          this.tempArr.push(parseInt(item.month))
        })
        console.log(this.tempArr)
      })
    },
    // 点击确认按钮
    handleClick(month) {
      this.disabled = false
      this.dialogVisible = true
      this.param.year = new Date().getFullYear()
      this.param.month = month
      this.param.day = new Date().getDate()
      if (!this.tempArr.includes(month)) {
        this.content = ""
        this.dataStr = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + "-" + new Date().getDate()
        //   this.dataStr = this.getDate()
        //   this.content = ""
        // this.$message.warning(month + "月未填写月报!")
        return
      } else {
        console.log("1")
        this.disabled = true
        this.content = ""
        this.getMonthlyByDay(month)
      }
    },
    getDate() {
      return this.param.year + "-" + this.param.month + "-" + this.param.day
    },
    // 点击确认添加月报
    handleMonth() {
      this.param.briefSummary = this.content
      addSummary(this.param).then(res => {
        this.$message.success("添加月报成功")
        this.getMonthlyList()
      })
      this.dialogVisible = false
    }
  }
}
</script>

<template>
  <div class="app-container">
    <!-- 月份面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item,index) in 12" :key="index">
        <template>
          <a v-if="tempArr.includes(item)" style="color: #00afff;font-size: 20px;cursor:pointer;"
             @click="handleClick(item)"
             href="javascript:void(0)">{{ item }}</a>
          <a style="font-size: 20px;cursor:pointer;" v-else @click="handleClick(item) "
             href="javascript:void(0)">{{ item }}</a>
        </template>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-dialog
      title='查看/填写月报'
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!--      <span>{{ content }}</span>-->
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="填写时间" prop="name">
          <el-input disabled :value="dataStr"></el-input>
        </el-form-item>
        <el-form-item label="月报内容">
          <el-input :disabled="disabled" type="textarea" v-model="content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" :disabled="disabled" @click="handleMonth">确定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">


</style>
